<template>
    <div class="table-container" :class="{ 'multi-table': true }">
      <div class="t-header">
        <div class="t-th" :class="{ 'gap-cell': item === true }" v-for="(item, index) in tableHeaders" :key="index">
          {{ item === true ? '' : item }}
        </div>
      </div>
      <div class="t-body">
        <div
          class="t-row"
          :style="{
            gridTemplateColumns: `repeat(${repeatColumn}, 1fr)`,
          }"
          v-for="(row, rowIndex) in tableDataNew"
          :key="rowIndex"
        >
          <div class="t-td" :style="tdObjStyle(rowIndex, cellIndex)" v-for="(cell, cellIndex) in row" :key="cellIndex">
            <template v-if="isArray(cell)">
              <div
                class="t-td"
                v-for="(item, itemIndex) in cell"
                :key="itemIndex"
              >
                {{ item }}
              </div>
            </template>
            <template v-else>
              <div class="t-td" :class="{ 'gap-cell': cell === true }">
                {{ cell === true ? '' : cell }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed, reactive } from "vue";
  
  const props = defineProps({
    // 表格列配置
    headers: {
      type: Array,
      default: () => [],
    },
    // 表格数据
    data: {
      type: Array,
      default: () => [],
    },
    splitNum: { type: Number, default: 2 }, // 分栏列索引
  });
  
  const isArray = (data) => {
    return Array.isArray(data);
  };
  
  const repeatColumn = computed(() => {
    return props.headers.length * props.splitNum + (props.splitNum - 1)
  })
  
  const tableHeaders = computed(() => {
    // return Array(props.splitNum).fill(props.headers).flat()
    return Array.from({ length: props.splitNum }, (_, i) =>
      i ? [true, ...props.headers] : props.headers
    ).flat();
  });
  
  // 精简的列分割方法
  const splitTableData = (data, columns = 1) => {
    if (columns <= 1) return data;
  
    return data.reduce((result, item, index) => {
      const chunkIndex = Math.floor(index / columns);
      const colIndex = index % columns;
  
      if (!result[chunkIndex]) {
        result[chunkIndex] = {};
      }
  
      // 处理数组格式
      if (Array.isArray(item)) {
        item.forEach((value, i) => {
          const key = i === 0 ? 'name' : i === 1 ? 'result' : 'level';
          const newKey = colIndex === 0 ? key : `${key}${colIndex}`;
          result[chunkIndex][newKey] = value;
        });
      } 
      // 处理对象格式
      else {
        Object.keys(item).forEach(key => {
          // 移除数字后缀以标准化键名
          const baseKey = key.replace(/\d+$/, '');
          const newKey = colIndex === 0 ? baseKey : `${baseKey}${colIndex}`;
          result[chunkIndex][newKey] = item[key];
        });
      }
  
      // 在列之间添加 isGap（除了最后一列）
      if (colIndex < columns - 1) {
        result[chunkIndex][`isGap${colIndex + 1}`] = true;
      }
  
      return result;
    }, []);
  };
  
  // 使用示例
  const tableDataNew = splitTableData(props.data, props.splitNum);
  
  
  const tdObjStyle = (rowIndex, cellIndex) => {
    if ((rowIndex + 1) % tableDataNew.length === 0) {
      return {
        color: 'red'
      }
    }
    return {}
  }
  
  </script>
  
  <style lang="scss" scoped>
  .table-container {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    // border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    background: white;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
  
    .t-header {
      width: 100%;
      display: flex;
      font-weight: bold;
    }
  
    .t-body {
      width: 100%;
  
      .t-row {
        width: 100%;
        display: grid;
        // grid-template-columns: 1fr 1fr 1fr;
        box-sizing: border-box;
  
        &:nth-child(2n) .t-td:not(:has(.t-td)) {
          background: paleturquoise;
        }
      }
    }
  
    .t-th,
    .t-td {
      width: 100%;
      flex: 1;
      flex-shrink: 0;
      text-align: center;
      min-height: 50px;
      padding: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .t-td {
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
    }
  
    .t-th {
      background-color: #e8e8e8;
      &:has(+ .gap-cell) {
        border-top-right-radius: 6px;
      }
  
      &:not(.gap-cell) {
        border-top: 1px solid #e8e8e8;
      }
  
      &.gap-cell + .t-th {
        border-top-left-radius: 6px;
      }
    }
    
    .gap-cell {
      background-color: transparent !important;
      border-left: 1px solid #e8e8e8;
      border-right: 1px solid #e8e8e8;
    }
  
    .t-header .gap-cell {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
  
    .t-body .t-row:last-child > .t-td > :last-child:not(.gap-cell) {
      border-bottom: 1px solid #e8e8e8;
    }
  }
  </style>
  